<template>
	<view class="start-school">
		<MyHeader :title ='title'></MyHeader>
		<scroll-view scroll-y="true" >
			<view>
				<!-- 顶部填写入学信息 -->
				<view class="banner-bg">
					<view class="sing-btn" @tap="goEnterSchool">
						立即填写 >
					</view>
				</view>
				<view class="school-content">
					<SchoolStart></SchoolStart>
					<!-- 名人堂 -->
					<view class="main-title">
						名人堂
					</view>
					<scroll-view scroll-x="true" class="scroll-content">
						<view class="scroll-item">
							<celebirtyList :excellentList='excellentList'></celebirtyList>
						</view>
					</scroll-view>
					<!-- 公告 -->
					<view class="main-title">
						公告
					</view>
					<Notice :noticeList="noticeList"></Notice>
				</view>
			</view>
		</scroll-view>
		<!-- 快速入学的弹窗 -->
		<view class="pop" v-if="target">
			<view class="pop-mask">
				
			</view>
			<view class="pop-box">
				<view class="pop-content">
					<image @tap="closet" class="close" src="../../static/imgs/close.png" mode=""></image>
					<image class="pop-btn" src="../../static/imgs/pop-btn.png" mode=""></image>
					<view class="btn-text" @tap="goEnterSchool">
						快速入学
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyHeader from '../../Common/My-header/my-header.vue'
	import SchoolStart from '../../Component/start-school/start-school.vue'
	import celebirtyList from '../../Component/start-school/celebirtyList.vue'
	import Notice from '../../Component/start-school/notice.vue'
	import {excellentList,noticeList} from '../../Service/start-school.js'
	export default{
		data(){
			return{
				title:'',
				target:true,
				pageSize:10,
				pageNum:1,
				excellentList:[],
				noticeList:[]
			}
		},
		onLoad(options) {
			const item = JSON.parse(options.item)
			this.title = item.className
			this.__init()
		},
		methods:{
			async __init(){
				const data = {
					pageSize :this.pageSize,
					pageNum:this.pageNum
				}
				this.excellentList = await excellentList(data)
				// console.log(this.excellentList)
				this.noticeList = await noticeList(data)
				console.log(this.noticeList)
			},
			closet(){
				this.target = false
			},
			goEnterSchool(){
				uni.navigateTo({
					url:'../enter-school/EnterSchools'
				})
			}
		},
		components:{
			MyHeader,
			SchoolStart,
			celebirtyList,
			Notice
		}
	}
</script>

<style scoped>
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transplant;
	}
	scroll-view{
		background-color: #f3f4f6;
	}
	.start-school{
		margin-top: 140rpx;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #f3f4f6;
	}
	.banner-bg{
		position: relative;
		width: 750rpx;
		height: 259rpx;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/banner.png') no-repeat;
		background-size: cover;
	}
	.sing-btn{
		position: absolute;
		top: 195rpx;
		left: 60rpx;
		width: 173rpx;
		height: 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 5rpx 10rpx;
		text-align: center;
		line-height: 44rpx;
		border: 1rpx solid #FFFFFF;
		border-radius: 40rpx;
	}
	.school-content{
		padding: 40rpx 37rpx;
	}
	.scroll-content{
		height: 100%;
		width: 100%;
	}
	.main-title{
		width: 102rpx;
		height: 34rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #252525;
		margin-top: 54rpx;
		margin-bottom: 36rpx;
	}
	.pop{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 100%;
	}
	.pop-mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.3);
	}
	.pop-box{
		width: 500rpx;
		height: 700rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.pop-content{
		width: 500rpx;
		height: 698rpx;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/pop-bg.png') no-repeat;
		background-size: cover;
	}
	.close{
		width: 63rpx;
		height: 63rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
	.pop-btn{
		width: 420rpx;
		height: 80rpx;
		position: absolute;
		left: 45rpx;
		bottom: 86rpx;
	}
	.btn-text{
		width: 136rpx;
		height: 33rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		left: 185rpx; 
		bottom: 120rpx;
	}
</style>
